<!doctype html>
<html lang="en">

<head>

    <!-- Basic Page Needs
    ================================================== -->
    <title>TubeLite Streaming Video HTML Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="TubeLite is - Professional A unique and beautiful collection of UI elements">
    <link rel="icon" href="assets/images/favicon.png">

    <!-- CSS 
    ================================================== -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/night-mode.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/css/uikit.min.css">

    <!-- icons
    ================================================== -->
    <link rel="stylesheet" href="assets/css/icons.css">

    <!-- Google font
    ================================================== -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

</head>


<body>

    <!-- Wrapper -->
    <div id="wrapper" class="collapse-sidebar">

        <!-- sidebar -->
        <div class="main_sidebar">
            <div class="side-overlay" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></div>

            <!-- sidebar header -->
            <div class="sidebar-header">
                <h4> 导航</h4>
                <span class="btn-close" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></span>
            </div>

            <!-- sidebar Menu -->
            <div class="sidebar">
                <div class="sidebar_innr" data-simplebar>

                    <div class="sections">
                        <h3> 浏览 </h3>
                        <ul>
                            <li class="active"> <a href="home.html"> <i class="uil-home-alt"></i> <span> 主页 </span> </a></li>
                            <li> <a href="your-watch-later.html"> 
                                <i class="uil-users-alt"></i> <span> 电影列表 </span> </a></li>

                        </ul>
                    </div>
                </div>
            </div>

			<div id="foot">

				<ul>
					<li> <a href="page-setting.html"> Setting </a></li>
				</ul>
			</div>

        </div>


        <!-- header -->
        <div id="main_header">
            <header>

                <!-- Logo-->
                <i class="header-traiger uil-bars"
                    uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></i>

                <!-- Logo-->
                <div id="logo">
                    <a href="#"> <img src="assets/images/logo.png" alt=""></a>
                    <a href="#"> <img src="assets/images/logo-light.png" class="logo-inverse" alt=""></a>
                </div>

                <!-- form search-->
 

                <!-- user icons -->
                <div class="head_user">
<span></span>

                    <!-- upload dropdown box -->
                    


                    <!-- profile -image -->
                    <a class="opts_account"> <img src="assets/images/avatars/avatar-1.jpg" alt=""></a>

                    <!-- profile dropdown-->
                    <div uk-dropdown="pos: top-right;mode:click ; animation: uk-animation-slide-bottom-small"
                        class="dropdown-notifications small">

                        <!-- User Name / Avatar -->
             

                        <!-- User menu -->

                        <ul class="dropdown-user-menu">
                         
                            <li>
                                <a href="#" id="night-mode" class="btn-night-mode">
                                    <i class="icon-feather-moon"></i> 模式切换
                                    <span class="btn-night-mode-switch">
                                        <span class="uk-switch-button"></span>
                                    </span>
                                </a>
                            </li>
							<li><a href="page-setting.html"> <i class="uil-cog"></i>个人信息</a></li>
                            <div class="menu-divider">
                              
                               <li><a href="form-modern-login.html"> <i class="icon-feather-log-out"></i> 登出</a>
                                </li>
                        </ul>


                    </div>

                </div>

            </header>

        </div>

        <!-- contents -->
        <div class="main_content">

            <div class="bg-gradient-primary uk-height-small uk-position-absolute uk-width-1-1"></div>
            <div class="main_content_inner">

                <div class="section-small text-center uk-light">
                    <h1>个人信息</h1>
                </div>

                <div class="m-auto uk-position-relative" uk-grid>

                    <div class="uk-width-2-3@m mt-sm-3 pl-sm-0">

                        <div class="uk-card-default rounded">
                            <div class="p-3">
                                <h5 class="mb-0">个人资料</h5>
                            </div>
                            <hr class="m-0">
                            <form enctype="multipart/form-data" class="uk-child-width-1-2@s uk-grid-small p-4" uk-grid >
								<div>
								    <h5 class="uk-text-bold mb-2">头像</h5>
								    <input type="file" id="avatarFile" class="uk-input">
									<button id="uplodaImg" class="button primary" onclick="postData()">更新头像</button>
								</div>
								<input type="hidden" id="avatar" class="uk-input">
                                <div>
                                    <h5 class="uk-text-bold mb-2">昵称</h5>
                                    <input type="text" id="nickName" class="uk-input">
                                </div>
                                <div>
                                    <h5 class="uk-text-bold mb-2">手机号</h5>
                                    <input type="text" id="phone" class="uk-input">
                                </div>
                                <div>
                                    <h5 class="uk-text-bold mb-2">邮箱</h5>
                                    <input type="text" id="email" class="uk-input" disabled="disabled">
                                </div>
                                <div>
                                    <h5 class="uk-text-bold mb-2">地址</h5>
                                    <input type="text" id="address" class="uk-input" placeholder="+1 555 623 568 ">
                                </div>
								<div>
								    <h5 class="uk-text-bold mb-2">性别</h5>
								    <select id="sex" class="uk-select">
								        <option value="1">男</option>
								        <option value="0">女</option>
								    </select>
								</div>
								
                            </form>
                            <div class="uk-flex uk-flex-right p-4">
                                <button id="save" class="button primary">保存</button>
                            </div>
                        </div>

                    </div>

                </div>
				

                <!-- footer
               ================================================== -->
                <div class="footer">
                    <div class="uk-grid-collapse" uk-grid>
                        <div class="uk-width-expand@s uk-first-column">
                            <p>© 2020 <strong>TubeLite</strong>. All Rights Reserved. </p>
                        </div>
                    </div>
                </div>


            </div>
        </div>

    </div>

    <!-- javaScripts
                ================================================== -->
    <script src="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/js/uikit.min.js"></script>
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/simplebar.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/public.js"></script>
    <!-- For Night mode -->
    <script>
        (function (window, document, undefined) {
            'use strict';
            if (!('localStorage' in window)) return;
            var nightMode = localStorage.getItem('gmtNightMode');
            if (nightMode) {
                document.documentElement.className += ' night-mode';
            }
        })(window, document);


        (function (window, document, undefined) {

            'use strict';

            // Feature test
            if (!('localStorage' in window)) return;

            // Get our newly insert toggle
            var nightMode = document.querySelector('#night-mode');
            if (!nightMode) return;

            // When clicked, toggle night mode on or off
            nightMode.addEventListener('click', function (event) {
                event.preventDefault();
                document.documentElement.classList.toggle('night-mode');
                if (document.documentElement.classList.contains('night-mode')) {
                    localStorage.setItem('gmtNightMode', true);
                    return;
                }
                localStorage.removeItem('gmtNightMode');
            }, false);

        })(window, document);
		
		$.ajax({
			url: apiurl + 'tUser/get',
			type: 'get',
			data: {
				'userId':userId,
			},
			success:function(data){
				$("#nickName").val(data.data.nickName);
				$("#phone").val(data.data.phone)
				$("#email").val(data.data.email)
				$("#address").val(data.data.address)
				$("#sex").val(data.data.sex)
			}
		})
		
		
		
		//注册方法
				$(function(){
				　　$("#save").click(function(){
					//必填校验
					//获取昵称
					var nickName = $("#nickName").val();
					if(nickName == null || nickName == ""){
						UIkit.notification({
							message: "昵称不能为空",
							status: 'primary',
							pos: 'top-center',
							timeout: 1000
						});
						return
					}
					//获取手机号
					var phone = $("#phone").val();
					if(phone == null || phone == ""){
						UIkit.notification({
							message: "手机号不能为空",
							status: 'primary',
							pos: 'top-center',
							timeout: 1000
						});
						return
					}
					
					//获取地主
					var address = $("#address").val();
					//获取性别
					var sex = $("#sex").val();
		 			$.ajax({
						url:apiurl + "tUser/updateUser",
						data:{
							userId:userId,
							nickName:nickName,
							phone:phone,
							address:address,
							sex:sex
						},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						success:function(data){
							if(data.msg == "修改成功"){
								location.href = "page-setting.html";
							}else{
								UIkit.notification({
									message: data.msg,
									status: 'primary',
									pos: 'top-center',
									timeout: 1000
								});
							}
						}
					}); 
					
		
				　　});
				

				  
				  
		});
		
		
		function postData(){
			var formdata = new FormData();
			        formdata.append("file", $('#avatarFile')[0].files[0]);
			$.ajax({
            type: "POST",
            url:apiurl + "file/imgUpload",
            data: formdata,
            contentType: false, // 不设置内容类型
            //processData: false, // 不处理数据
            // dataType: "json",
			success:function(data){
				alert(data)
			}
			})
			}
    </script>



	
</body>

</a>